<template>
  <div class="container-item-tag-2">
    <div v-if="loading" class="item-tag-base  item-tag-name-2" style="color: #888">加载中...</div>
    <div v-else class="item-tag-base item-tag-name-2" @click="chekcedAll">全部{{ isCheckedAll?'选择':'取消' }}</div>
    <div v-for="(temp, index) in tag" :key="index" class="item-tag-base item-tag-name-2" :class="temp.checked&&'item-active'">
      <span @click="checkedTag(index)">{{ temp.name }}</span>
      <!-- <i class="el-icon-delete" @click="delTag(temp,index)" /> -->
    </div>
    <!-- <div class="item-tag-base item-add-tag-btn el-icon-plus" @click="addTag_2" /> -->
  </div>
</template>

<script>
import { getTag_2, createTag_2, delelteTag_2 } from '@/api/miva'
export default {
  props: {
    tagId: {
      type: [Number, String],
      default: 0
    }
  },
  data() {
    return {
      loading: true,
      tag: []
    }
  },
  computed: {
    checked_tag() {
      const arr = []
      for (const val of this.tag) {
        if (val.checked) {
          arr.push(val.name)
        }
      }
      return arr.toString()
    },
    isCheckedAll() {
      for (const val of this.tag) {
        if (!val.checked) return true
      }
      return false
    }
  },
  async mounted() {
    await this.getTag()
    this.loading = false
  },
  methods: {
    // 发送给父组件数据
    emitData() {
      this.$emit('checked', { id: this.tagId, data: this.checked_tag })
    },
    // 全选二级标签
    chekcedAll() {
      const isAll = this.isCheckedAll
      for (const key in this.tag) {
        this.tag[key].checked = isAll
      }
      this.emitData()
    },
    // 选取二级标签
    checkedTag(index) {
      this.tag[index].checked = !this.tag[index].checked
      this.emitData()
    },
    // 获取二级标签
    async getTag() {
      const res = await getTag_2({ tag_1_id: this.tagId })
      const arr = []
      for (const val of res.data) {
        arr.push({ id: val.id, name: val.tag_2_name, checked: false })
      }
      this.tag = arr
    },
    // 添加二级标签
    async addTag_2() {
      this.$prompt('请输入新的二级标签', '添加新标签', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(async({ value }) => {
          if (value) {
            await createTag_2({ tag_1_id: this.tagId, tag_2_name: value })
            this.tag.push({ id: this.tagId, name: value, checked: false })
          }
        })
        .catch(() => {})
    },
    // 删除二级标签
    async delTag(temp, index) {
      this.$confirm(`确认删除二级标签 [ ${temp.name} ] 嘛?`, '删除标签', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(() => {
          delelteTag_2({ id: temp.id })
          this.tag.splice(index, 1)
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="less" scoped>

.container-item-tag-2 {
  padding-left: 20px;
  display: flex;
  flex-wrap: wrap;
  user-select: none;
  .item {
    &-add-tag-btn {
      width: 90px;
      border: 1px dashed #888 !important;
      font-weight: bold;
    }
    &-active {
      border-color: #e44f50 !important;
      background-color: #e44f50;
      color: #fff;
    }
    &-tag-base {
      display: inline-block;
      height: 21px;
      line-height: 21px;
      margin-right: 20px;
      margin-bottom: 10px;
      padding: 0 10px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border: 1px solid transparent;
      border-radius: 30px;
      font-size: 14px;
      text-align: center;
      cursor: pointer;
      // padding-top: 10px;
    }
  }
}
</style>
